<template>
    <Scroll class="index-list" :probeType='3' @scroll="onScroll" ref="scrollRef">
      <!-- 歌手分组 -->
      <ul ref='groupRef'>
          <li v-for="group in data" :key="group.title" class="group">
            <h2 class="title">{{group.title}}</h2>
            <!-- 渲染每组的歌手 -->
            <ul>
              <li v-for="item in group.list" :key='item.id' class="item" @click="onSingerClick(item)">
                  <img class="pic" v-lazy="item.pic">
                  <span class="name">{{item.name}}</span>
              </li>
            </ul>
          </li>
      </ul>
      <div class="fixed" v-show='fixedTitle' :style='fixedStyle'>
        <div class="fixed-title">{{fixedTitle}}</div>
      </div>
      <!-- 侧边导航栏 -->
      <!-- 这里阻止冒泡是为了防止冒泡的bs上 -->
      <div class="shortcut"
        @touchstart.stop.prevent="onShortcutTouchStart"
        @touchmove.stop.prevent="onShortcutTouchMove"
        @touchend.stop.prevent>
          <ul>
              <li v-for="(item,index) in shortcutList" :key="item" class="item" :data-index = "index"
              :class="{'current':currentIndex === index}">
                {{item}}
              </li>
          </ul>
      </div>
    </Scroll>
</template>
<script>
import Scroll from '@/components/base/scroll/scroll'
import useFixed from '@/components/index-list/use-fixed'
import useShortcut from '@/components/index-list/use-shortcut'
export default {
  name: 'index-list',
  components: {
    Scroll
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  emits: ['selectSinger'],
  setup (props, { emit }) {
    const { groupRef, onScroll, fixedTitle, fixedStyle, currentIndex } = useFixed(props)
    const { shortcutList, onShortcutTouchStart, onShortcutTouchMove, scrollRef } = useShortcut(props, groupRef)

    // 获取到当前点击的歌手，传给父组件Singer，Singer再传给子组件SingerDetail
    function onSingerClick (item) {
      emit('selectSinger', item)
    }

    return { groupRef, onScroll, fixedTitle, fixedStyle, currentIndex, shortcutList, onShortcutTouchStart, onShortcutTouchMove, scrollRef, onSingerClick }
  }
}
</script>
<style lang="scss" scoped>
 .index-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: $color-background;
    .group {
      padding-bottom: 1.279318rem;
      .title {
        height: 1.279318rem;
        line-height: 1.279318rem;
        padding-left: .852878rem;
        font-size: $font-size-small;
        color: $color-text-l;
        background: $color-highlight-background;
      }
      .item {
        display: flex;
        align-items: center;
        padding: .852878rem 0 0 1.279318rem;
        .pic {
          width: 2.132196rem;
          height: 2.132196rem;
          border-radius: 50%;
        }
        .name {
          margin-left: .852878rem;
          color: $color-text-l;
          font-size: $font-size-medium;
        }
      }
    }
    .fixed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      .fixed-title {
        height: 1.279318rem;
        line-height: 1.279318rem;
        padding-left: .852878rem;
        font-size: $font-size-small;
        color: $color-text-l;
        background: $color-highlight-background;
      }
    }
    .shortcut {
      position: absolute;
      right: .170576rem;
      top: 50%;
      transform: translateY(-50%);
      width: .852878rem;
      padding: .852878rem 0;
      border-radius: .426439rem;
      text-align: center;
      background: $color-background-d;
      font-family: Helvetica;
      .item {
        padding: .127932rem;
        line-height: 1;
        color: $color-text-l;
        font-size: $font-size-small;
        &.current {
          color: $color-theme
        }
      }
    }
  }
  </style>
